<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按需加载图片</title>
	<style type="text/css">
	*{margin:0px;padding:0px;}
	.item{width:500px;height:400px;float:left;margin-left:120px;}

	#pro{width:800px;height:800px;}


	</style>
</head>
<body>
	<div id='pro'></div>
	<div class='item'><img pass="./meinv/1.jpg" alt="" width='100%'></div>
	<div class='item'><img pass="./meinv/2.jpg" alt="" width='100%'></div>
	<div class='item'><img pass="./meinv/3.jpg" alt="" width='100%'></div>
	<div class='item'><img pass="./meinv/4.jpg" alt="" width='100%'></div>
	<div class='item'><img pass="./meinv/5.jpg" alt="" width='100%'></div>
	<div class='item'><img pass="./meinv/6.jpg" alt="" width='100%'></div>
	<div class='item'><img pass="./meinv/7.jpg" alt="" width='100%'></div>
	<div class='item'><img pass="./meinv/8.jpg" alt="" width='100%'></div>
	<div class='item'><img pass="./meinv/9.jpg" alt="" width='100%'></div>
	<div class='item'><img pass="./meinv/10.jpg" alt="" width='100%'></div>

	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
	<script type="text/javascript">
	//滚动事件
	$(window).scroll(function(){
		//获取每一张图片
		$('div').each(function(){

			//获取滚动条距离顶部的偏移量
			var tp = $(window).scrollTop();

			//获取可视区域
			var ch =$(window).height();

			//获取每一个元素距离顶部的偏移量
			var t = $(this).offset().top;
			//判断
			if(tp+ch-t >= 200)
			{
				//获取src
				var src = $(this).find('img').attr('pass');
				//移除
				$(this).find('img').remove('pass');
				//设置图片的src的值
				$(this).find('img').attr('src',src);
			}


		})

	})


	</script>
</body>
</html>